<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台商品管理</title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
		分类:<select v-model="selectId">
				<option v-for="category in categoryList" 
				v-bind:value="category.categoryId">
				{{category.categoryName}}
				</option>
			</select><br>
			名称：<input v-model="itemName" /><br>
			价格：<input v-model="itemPrice" /><br>
			描述：<input v-model="itemDesc" /><br>
			图片：<input v-model="itemImage" /><br>
			<button v-on:click="insert">添加</button>
			<table border="2">
				<tr>
					<td>编号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>删除</td>
					<td>修改</td>	
				</tr>
				<tr v-for="item in itemList">
					<td>{{item.itemId}}</td>
					<td>{{item.itemName}}</td>
					<td>{{item.itemPrice}}</td>
					<td v-on:click="deleteItem(item.itemId)">删除</td>
					<td ><a v-bind:href="'update.html?itemId='+item.itemId" >修改</a></td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				selectId:null,
				categoryList:[],
				itemName:"",
				itemPrice:"",
				itemDesc:"",
				itemImage:"",
				itemList:[]
			},
			methods:{
				findItem:function(){
					var serverUrl="http://localhost:8080/item/selectAll";
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.itemList=response.data;	
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				findCategory:function(){
					var serverUrl="http://localhost:8080/category/selectAll"
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.categoryList=response.data;
						
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				insert:function(){
					var serverUrl="http://localhost:8080/item/insert?"
					+"categoryId="+this.selectId+"&itemName="+this.itemName 
					+"&itemImage="+this.itemImage 
					+"&itemPrice="+this.itemPrice +"&itemDesc="+this.itemDesc;
					console.log(serverUrl);
					axios.get(serverUrl)
					.then(function(response){
						window.alert(response.data);
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				deleteItem:function(itemId){
					var result=window.confirm("是否确认删除")
					window.alert(result);
					var serverUrl="http://localhost:8080/item/delete?itemId="+itemId;
					console.log(serverUrl);
					var vue=this
					axios.get(serverUrl)
					.then(function(response){
						window.alert(response.data);
						vue.findItem();
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
			},
			mounted:function(){
				console.log("mounted()");
				this.findCategory();
				this.findItem();
			}
		}
		var vue =new Vue(config);
	</script>
</html>
